<template>
    <div class="btn-empty" @click="$emit('click')">
        <img v-if="type === 'word'" class="icon" src="../assets/word.png" alt="">
        <img v-if="type === 'pic'" class="icon" src="../assets/pic.png" alt="">

        {{text}}
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: '上传营业执照或员工证件及资格证书',
        },
        type: {
            type: String,
            default: 'word',
        }
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .btn-empty {
        width: 100%;
        box-sizing: border-box;
        border: solid 1px #dcdee0;
        font-size: 14px;
        color: #323233;
        padding: 22px 0;
        text-align: center;
        cursor: pointer;

        &:hover{
            background: $primaryColor;
            border-color: $primaryColor;
            color: white;

            i{
                color: white;
            }
        }

        & + .btn-empty{
            margin-top: 10px;
        }

        i{
            color: $primaryColor;
        }

        .icon{
            display: inline-block;
            vertical-align: middle;
            width: 1.2em;
        }
    }
</style>